<template>
	<view class="main" @touchstart="startMove" @touchend="endMove">
		<template v-if="itemStyle.length">
			<template v-for="(item,index) in list">
				<view class="card" :key="index"
					:style="{ background:item.color,zIndex:maxZindex[index].zIndex,top:maxZindex[index].top+'rpx'}">
					{{item.name}}
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		props: ["list"],
		data() {
			return {
				screenWidth: 0,
				slideNote: {
					x: 0,
					y: 0
				},
				itemStyle: []
			}
		},
		computed: {
			maxZindex() {
				if (this.itemStyle.length) {
					const maxIndex = this.itemStyle.findIndex(obj => obj.zIndex === Math.max(...this.itemStyle.map(item =>
						item.zIndex)));
					const maxArray = this.itemStyle[maxIndex];
					const prevZindex = maxIndex > 0 ? this.itemStyle[maxIndex - 1] : this.itemStyle[this.itemStyle
						.length -
						1];
					const nextZindex = maxIndex < this.itemStyle.length - 1 ? this.itemStyle[maxIndex + 1] : this.itemStyle[
							0];
					let arrmld = []
					for (let i = 0; i < this.itemStyle.length; i++) {
						let obj = {
							top: 0,
							zIndex: 0
						}
						switch (this.itemStyle[i].zIndex) {
							case maxArray.zIndex:
								this.itemStyle[i].top = 60
								obj.top = 70
								obj.zIndex = maxArray.zIndex
								break;
							case prevZindex.zIndex:
								obj.top = 0
								obj.zIndex = maxArray.zIndex - 1
								break;
							case nextZindex.zIndex:
								obj.top = 100
								obj.zIndex = maxArray.zIndex - 1
								break;
						}
						arrmld.push(obj)
					}
					return arrmld
				} else {
					return []
				}
			}
		},
		mounted() {
			let macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			this.list.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
		},
		methods: {
			getStyle(e) {
				return {
					zIndex: 9999 - e,
					top: 0
				}
			},
			startMove(e) {
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				let newList = JSON.parse(JSON.stringify(this.itemStyle))
				if ((e.changedTouches[0].pageY - this.slideNote.y) < 0) {
					// 向下滑动

					let last = [newList.pop()]
					newList = last.concat(newList)
				} else {
					// 向上滑动

					newList.push(newList[0])
					newList.splice(0, 1)
				}
				this.itemStyle = newList

			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		position: relative;
		.card {
			width: 690rpx;
			height: 344rpx;
			transition: all 1s;
			position: absolute;
		}
	}
</style>